<!DOCTYPE html>

<!-- $Id: index.html 73 2012-03-12 13:08:27Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../../css/basics.css" rel="stylesheet" type="text/css"/><!-- -->
<link href="../../css/960c12.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 10]><link href="../../css/ie.css" rel="stylesheet" type="text/css"/><![endif]-->

<script type="text/javascript" charset="utf-8" src="../../jquery/1.7.1.js"></script> 

<title>jquery.ajp.checkbox - examples</title>

<link href="../../source/css/release/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<link href="../../source/css/release/theme/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="../../source/release/jquery.ajp.js"></script> 

<style>

body { margin: 1em; }

.ex1 td { padding: 5px !important; }
.ex2 .ajp-checkbox-radio { margin: 6px 13px 0 10px; }

</style>

<script>

$(document).ready(function () {
	$('input[type=checkbox]').ajp$checkbox()
	$('input[type=radio]').ajp$checkbox()
})

</script>

</head>

<body>

	<table class="layout ex1">
		<tr>
			<td><input type="checkbox" checked="true" id="ex1c1"/></td>
			<td><label for="ex1c1">checkbox 1</label></td>
		</tr>
		<tr>
			<td><input type="checkbox" id="ex1c2"/></td>
			<td><label for="ex1c2">checkbox 2</label></td>
		</tr>
		<tr>
			<td><input type="checkbox" id="ex1c3" disabled="true"/></td>
			<td><label for="ex1c3">checkbox 3</label></td>
		</tr>
		<tr>
			<td><input type="checkbox" id="ex1c4" checked="true" disabled="true"/></td>
			<td><label for="ex1c4">checkbox 4</label></td>
		</tr>


	</table>

	<fieldset class="ex2">
		<legend>Choose one option</legend>
		<input type="radio" id="ex2o1" name="ex2"> <label for="ex2o1">option 1</label><br/>
		<input type="radio" id="ex2o2" name="ex2" checked="true"> <label for="ex2o2">option 2</label><br/>
		<input type="radio" id="ex2o3" name="ex2"> <label for="ex2o3">option 3</label><br/>
		<input type="radio" id="ex2o4" name="ex2" disabled="true"> <label for="ex2o4">option 4</label><br/>
	</fieldset>

</body>